import router from '@/router'
import store from '@/store'
// NProgress进度条
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { asyncRoutes } from '@/router' // 引入动态路由
// 白名单
const whiteList = ['/login', '/404']
// 路由前置导航  to 去哪里  from 从哪里来 next 放行
router.beforeEach(async(to, from, next) => {
  // 开启进度条    如果登录后访问login页面，会被拦截到首页，不会触发后置导航，所以需要在被拦截的地方也结束进度条NProgress.done()
  NProgress.start()
  // const token = store.getters.token
  const { token, userInfo } = store.state.user
  // 1.判断有没有token
  if (token) {
    // 有token证明登录了
    if (!userInfo.userId) {
      // 判断vuex中有没有用户信息，如果有就不发请求
      // 如果没有就发请求拿用户信息
      try {
        await store.dispatch('user/getUserInfo')
        // 1.去掉固定的动态路由添加
        // 2.把动态路由全部导出
        // 3.拿到用户信息，就可以拿到用户拥有的权限
        // 4.给动态路由添加属性，方便匹配  name：权限标识，添加在chilrden中，添加在外边会有警告
        // 5.遍历全部的动态路由，过滤出用户拥有的路由页面权限
        // 6.动态添加到路由中
        // 7.把动态添加的路由存储到vuex中，这样左侧栏菜单就会自动渲染
        // 8.404问题 当页面一刷新 addRoutes 还没有添加上 路由就开始跳转了 所以找不到路由就跳转到404页面了。在最后添加404  *号的优先级是最低的
        // 9.刷新白屏问题 因为已经在当前页面了，刷新后从新渲染路由，如果先渲染路由在进入就没问题，所以此时需要重新进入一变
        // 10.从新进入页面会导致有两次历史记录，回退还会是当前页面，所以需要覆盖那一次的历史记录，使用replace: true即可 to是要去的页面
        const menus = store.state.user.userInfo.roles.menus
        // console.log(menus)
        const otherRoutes = asyncRoutes.filter(item => menus.includes(item.children[0].name))
        // console.log(otherRoutes)
        router.addRoutes([...otherRoutes, { path: '*', redirect: '/404', hidden: true }])
        store.commit('permission/setRoules', otherRoutes) // 7
        next({
          ...to,
          replace: true
        })
      } catch {
        return
      }
      // 有token证明登录了，而且没有用户信息，就会发请求 因为dispatch是异步的，如果不用await进行等待，进入主页后获取信息会获取不到，应该先等到信息后在进入主页（其他需要用到信息的页面）
    }
    // 2.有token判断要去的页面是不是login，是的话拦截到主页
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      // 3.有token不是去login，直接放行
      next()
    }
  } else {
    // 4.没有token判断要去的页面是否在白名单中，在白名单中就放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 5.没有token不去白名单中的页面，拦截到login
      next('/login')
      NProgress.done()
    }
  }
})
// 路由后置导航
router.afterEach((to, from) => {
  // 结束进度条
  NProgress.done()
})
